.slimsearch-button {
  display: inline-flex;
  align-items: center;

  box-sizing: content-box;
  height: 1.25rem;
  margin-inline: 1rem 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 1rem;

  background: transparent;
  background: var(--vp-c-control);
  color: var(--vp-c-text);

  font-weight: 500;

  cursor: pointer;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color);

  @media print {
    display: none;
  }

  @media (max-width: 959px) {
    border-radius: 50%;
  }

  &:hover {
    border: 1px solid var(--vp-c-accent-bg);
    background-color: var(--vp-c-control-hover);
  }

  .search-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.slimsearch-placeholder {
  margin-inline: 0.25rem;
  font-size: 1rem;

  @media (max-width: 959px) {
    display: none;
  }
}

.slimsearch-key-hints {
  font-size: 0.75rem;

  @media (max-width: 959px) {
    display: none;
  }
}

.slimsearch-key {
  display: inline-block;

  min-width: 1em;
  margin-inline: 0.125rem;
  padding: 0.25rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 4px;

  box-shadow: 1px 1px 4px 0 var(--vp-c-shadow);

  line-height: 1;
  letter-spacing: -0.1em;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color),
    border var(--vp-t-color),
    box-shadow var(--vp-t-transform);
}
